<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动漫世界</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 轮播图样式 */
        .banner {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 200px;
            border-radius: 12px;
        }
        
        .slides-container {
            display: flex;
            width: 500%;
            height: 100%;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .slide {
            width: 20%;
            height: 100%;
            position: relative;
        }
        
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .banner-controls {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
        }
        
        .banner-control {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .banner-control.active {
            background: #fff;
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="搜索动漫、漫画、番剧...">
            <div class="search-suggestions">
                <div class="search-loading"></div>
                <div class="search-suggestion">咒术回战</div>
                <div class="search-suggestion">间谍过家家</div>
                <div class="search-suggestion">海贼王</div>
            </div>
        </div>
    </header>

    <main class="main-content">
        <div class="banner">
            <div class="slides-container">
                <div class="slide">
                    <img src="image/1.png" alt="banner 1">
                </div>
                <div class="slide">
                    <img src="image/2.png" alt="banner 2">
                </div>
                <div class="slide">
                    <img src="image/3.jpg" alt="banner 3">
                </div>
                <div class="slide">
                    <img src="image/4.png" alt="banner 4">
                </div>
                <div class="slide">
                    <img src="image/5.png" alt="banner 5">
                </div>
            </div>
            <div class="banner-controls">
                <div class="banner-control active"></div>
                <div class="banner-control"></div>
                <div class="banner-control"></div>
                <div class="banner-control"></div>
                <div class="banner-control"></div>
            </div>
        </div>
        
        <div class="tags">
            <a href="home.html" class="tag active" style="text-decoration: none;">推荐</a>
            <a href="home2.html" class="tag" style="text-decoration: none;">热门</a>
            <a href="home3.html" class="tag" style="text-decoration: none;">完结</a>
            <a href="home4.html" class="tag" style="text-decoration: none;">日漫</a>
            <a href="home5.html" class="tag" style="text-decoration: none;">国漫</a>
        </div>

        <div class="section-title">
            <span>热门推荐</span>
            <span class="more">查看更多 ></span>
        </div>

        <div class="anime-grid">
            <!-- 动漫卡片内容 -->
        </div>
    </main>

    <nav class="nav-bar">
        <a href="home.html" class="nav-item">
            <img src="image/icon1.png" alt="首页">
            <div>首页</div>
        </a>
        <a href="recommend.html" class="nav-item">
            <img src="image/icon2.png" alt="发现">
            <div>发现</div>
        </a>
        <a href="follow1.html" class="nav-item">
            <img src="image/icon3.png" alt="追番">
            <div>追番</div>
        </a>
        <a href="profile.html" class="nav-item">
            <img src="image/icon4.png" alt="我的">
            <div>我的</div>
        </a>
    </nav>

    <script>
        // 轮播功能实现
        let currentSlide = 0;
        const slidesContainer = document.querySelector('.slides-container');
        const bannerControls = document.querySelectorAll('.banner-control');
        const totalSlides = bannerControls.length;

        function updateControls(index) {
            bannerControls.forEach((control, i) => {
                control.classList.toggle('active', i === index);
            });
        }

        function goToSlide(index) {
            currentSlide = index;
            const offset = -currentSlide * 100;
            slidesContainer.style.transform = `translateX(${offset}%)`;
            updateControls(currentSlide);
        }

        function nextSlide() {
            currentSlide = (currentSlide + 1) % totalSlides;
            goToSlide(currentSlide);
        }

        // 自动轮播
        setInterval(nextSlide, 3000);

        // 搜索功能
        const searchInput = document.querySelector('.search-box input');
        const searchSuggestions = document.querySelector('.search-suggestions');
        
        searchInput.addEventListener('focus', () => {
            searchSuggestions.style.display = 'block';
        });
    </script>
</body>
</html>